<template>
	<div class=" bg-weight">
		<el-tabs v-model="activeCode" @tab-click="handleClick" class="tabs">
			<el-tab-pane label="全部" name="-1"></el-tab-pane>
			<el-tab-pane label="待接单" name="0"></el-tab-pane>
			<el-tab-pane label="已接单" name="1"></el-tab-pane>
			<el-tab-pane label="已完成" name="2"></el-tab-pane>
			<el-tab-pane label="已取消" name="3"></el-tab-pane>
			<el-tab-pane label="超时/退单" name="4"></el-tab-pane>
			<el-tab-pane label="已关闭" name="5"></el-tab-pane>
		</el-tabs>
		
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
			<div class="form-search">
				<el-form-item label="订单编号" prop="advertorialOrderNo">
					<el-input v-model="ruleForm.advertorialOrderNo" placeholder="请输入订单编号"></el-input>
				</el-form-item>
				<el-form-item label="活动名称" prop="advertorialOrderActivityRemark">
					<el-input v-model="ruleForm.advertorialOrderActivityRemark" placeholder="请输入活动名称"></el-input>
				</el-form-item>
			</div>
			<div class="form-search">
				<el-form-item label="资源名称" prop="resourceName">
					<el-input v-model="ruleForm.resourceName" placeholder="请输入资源名称"></el-input>
				</el-form-item>
				<el-form-item label="活动时间">
					<el-date-picker v-model="dateTime" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="~"
					placeholder="请输入选择日期时间"></el-date-picker>
				</el-form-item>
				<!-- submitForm('ruleForm') -->
				<el-button type="primary" @click="handleSearch()" class="search-btn">搜索</el-button>
			</div>
		</el-form>
		<div class="export-btn">
			<el-button type="primary" @click="exportAll('ruleForm')">{{activeName}}导出</el-button>
		</div>
		<div class="mar-20">
			<el-table :data="tableData" border style="width: 100%" :header-cell-style="{
						'background-color': '#f2f2f2',
						'font-size': '16px',
						'font-weight': 'bold',
						'color' : '#66667d'
					}">
				<el-table-column prop="OrderNo" label="订单号" width="150">
				</el-table-column>
				<el-table-column prop="OrderArticleTitle" label="文章标题" width="120">
				</el-table-column>
				<el-table-column label="资源名称" width="120">
					<template slot-scope="scope">
						<el-tag type='danger' @click="handleGoto(scope.row.resourceName)" close-transition>{{scope.row.resourceName}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="稿件预览" width="120">
					<template slot-scope="scope">
						<el-tag type='warning' @click="handleGoto(scope.row.OrderManuscript)" close-transition>{{scope.row.OrderManuscript}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="稿件下载" width="150">
					<template slot-scope="scope">
						<el-tag type='primary' @click="handleGoto(scope.row.OrderManuscriptDownloadLink)" close-transition>下载稿件</el-tag>
					</template>
				</el-table-column>

				<el-table-column label="完成链接" width="180">
					<template slot-scope="scope">
						{{scope.row.OrderAccomplishLink}}
					</template>
				</el-table-column>

				<el-table-column label="支付金额" width="150">
					<template slot-scope="scope">
						{{scope.row.OrderPrice}} 元
					</template>
				</el-table-column>

				<el-table-column label="执行状态" width="150">
					<template slot-scope="scope">
						<el-tag :type="scope.row.OrderExecutionStatusStr === '已取消' ? 'danger' : 'success'" close-transition>{{scope.row.OrderExecutionStatusStr}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="下单时间" width="180">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button v-if="scope.row.OrderExecutionStatus != 6 " size="mini" type="success" @click="handleDetail(scope.$index, scope.row.OrderExecutionStatus)">详情</el-button>

						<el-button v-if="scope.row.OrderExecutionStatus == 6" size="mini" type="success" @click="handlePay(scope.$index, scope.row)">支付</el-button>
						<el-button v-if="scope.row.OrderExecutionStatus == 6" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-sizes="[30,50]" layout="prev, pager, next, jumper,total, sizes" :total="totalCount">
			</el-pagination>
			<el-dialog title="订单信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<el-steps :active="active" finish-status="success">
					<el-step title="用户下单"></el-step>
					<el-step title="待接单"></el-step>
					<el-step title="已接单"></el-step>
					<el-step title="已完成"></el-step>
					<el-step title="已取消"></el-step>
				</el-steps>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		created() {
			this.pid = this.$route.params.orderType;
			this.handleSearch();
		},
		watch: {
			dateTime(newVal) {
				this.ruleForm.startTime = newVal[0];
				this.ruleForm.endTime = newVal[1];
			},
			// 利用watch方法检测路由变化：
			'$route': function() {
				// 拿到目标参数 to.query.id 去再次请求数据接口
				this.pid = this.$route.params.orderType;
				this.handleSearch();
			}
		},
		data() {
			return {
				pid: 0,
				dialogVisible: false,
				active: 3, // 详请步骤条
				activeName: "全部", //选项卡名称
				activeCode: '-1', //选项卡
				currentPage: 1, //分页插件
				totalCount: 120, //查询后的总条数
				totalPage: 10,
				dateTime: '', //开始结束
				ruleForm: {
					type: 0,
					advertorialOrderExecutionStatus: -1,
					advertorialOrderNo: '',
					advertorialOrderActivityRemark: '',
					resourceName: '',
					startTime: '',
					endTime: '',
					page: 1,
					size: 120
				},
				tableData: [{
					id: -1,
					OrderNo: '129871241562',
					OrderArticleTitle: '老母猪为何夜夜惨叫',
					OrderAccomplishLink: '走进科学',
					OrderManuscript: 'www.aaa.com',
					OrderManuscriptDownloadLink: 'www.bbb.com',
					OrderSourceLink: "www.ccc.com",
					OrderPrice: "1.00",
					OrderExecutionStatusStr: "待支付",
					createTime: "2019.11.12 00:00:00",
					OrderExecutionStatus: 1
				}],
				// 验证规则
				rules: {
					// orderNum: [
					// 	{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
					// ],
					// advertorialOrderActivityRemark: [
					// 	{ required: false, message: '请选择活动名称', trigger: 'change' }
					// ],
					// type: [
					// 	{ type: 'array', required: false, message: '请至少选择一个活动性质', trigger: 'change' }
					// ],
					// resource: [
					// { required: false, message: '请选择活动资源', trigger: 'change' }
					// ],
					// desc: [
					// 	{ required: false, message: '请填写活动形式', trigger: 'blur' }
					// ]
				}
			};
		},
		methods: {
			handleClick(tab) {
				let index = tab.index;
				//console.log(tab.index);
				if (index == '0') {
					this.activeName = "全部";
				} else if (index == '1') {
					this.activeName = "待接单";
				} else if (index == '2') {
					this.activeName = "已接单";
				} else if (index == '3') {
					this.activeName = "已完成";
				} else if (index == '4') {
					this.activeName = "已取消";
				}
				else if (index == '5') {
					this.activeName = "超时/退单";
				}else {
					this.activeName = "已关闭";
				}
				this.ruleForm.advertorialOrderExecutionStatus = index - 1;
				this.handleSearch();
			},
			handleSearch() {
				this.ruleForm.type = this.pid;
				this.$api.advertorialOrder.findMediumByPage(this.ruleForm).then(res => {
					//console.log(res.data);async funA(){
					//console.log("数据",res)
					let data = res.data.data;
					if (data.length <= 0) {
						this.tableData = [];
						this.totalCount = 0;
						this.totalPage = 0;
						return;
					}
					if (this.pid == 0) {
						this.setAdvertorial(data);
						this.totalCount = res.data.totalCount;
						this.totalPage = res.data.totalPage;
					} else if (this.pid == 1) {
						this.setMediaTableData(data);
						this.totalCount = res.data.totalCount;
						this.totalPage = res.data.totalPage;
					} else if (this.pid == 2) {
						this.setOfficialTableData(data);
						this.totalCount = res.data.totalCount;
						this.totalPage = res.data.totalPage;
					} else if (this.pid == 3) {
						this.setMicroblogTableData(data);
						this.totalCount = res.data.totalCount;
						this.totalPage = res.data.totalPage;
					} else if (this.pid == 4) {
						this.setRedbookTableData(data);
						this.totalCount = res.data.totalCount;
						this.totalPage = res.data.totalPage;
					} else if (this.pid == 5) {
						this.setVideoTableData(data);
						this.totalCount = res.data.totalCount;
						this.totalPage = res.data.totalPage;
					}

				});
			},
			setAdvertorial(data){
				console.log('软文');
				let tablist = [];
				for (let i = 0; i <= data.length - 1; i++) {
					let tabjson = {}
					tabjson.id = data[i].id;
					tabjson.OrderNo = data[i].advertorialOrderNo;
					tabjson.OrderArticleTitle = data[i].advertorialOrderArticleTitle;
					tabjson.OrderAccomplishLink = data[i].advertorialOrderAccomplishLink;
					tabjson.OrderManuscript = data[i].advertorialOrderManuscript;
					tabjson.OrderManuscriptDownloadLink = data[i].advertorialOrderManuscriptDownloadLink;
					tabjson.OrderSourceLink = data[i].advertorialOrderSourceLink;
					tabjson.OrderPrice = data[i].advertorialOrderPrice;
					tabjson.OrderExecutionStatusStr = data[i].advertorialOrderExecutionStatusStr;
					tabjson.createTime = data[i].createTime;
					tabjson.resourceName = data[i].resourceName;
					tabjson.OrderExecutionStatus = data[i].advertorialOrderExecutionStatus;
					tablist.push(tabjson);
				}
				this.tableData = tablist;
			
			},
			setMediaTableData(data){
				console.log('自媒体');
				let tablist = [];
				for (let i = 0; i <= data.length - 1; i++) {
					let tabjson = {}
					tabjson.id = data[i].id;
					tabjson.OrderNo = data[i].mediaOrderNo;
					tabjson.OrderArticleTitle = data[i].mediaOrderArticleTitle;
					tabjson.OrderAccomplishLink = data[i].mediaOrderAccomplishLink;
					tabjson.OrderManuscript = data[i].mediaOrderManuscript;
					tabjson.OrderManuscriptDownloadLink = data[i].mediaOrderManuscriptDownloadLink;
					tabjson.OrderSourceLink = data[i].mediaOrderSourceLink;
					tabjson.OrderPrice = data[i].mediaOrderPrice;
					tabjson.OrderExecutionStatusStr = data[i].mediaOrderExecutionStatusStr;
					tabjson.createTime = data[i].createTime;
					tabjson.resourceName = data[i].resourceName;
					tabjson.OrderExecutionStatus = data[i].mediaOrderExecutionStatus;
					tablist.push(tabjson);
				}
				this.tableData = tablist;
				
			},
			setOfficialTableData(data){
				console.log('公众号');
				let tablist = [];
				for (let i = 0; i <= data.length - 1; i++) {
					// console.log('公众号',i);
					let tabjson = {}
					tabjson.id = data[i].id;
					tabjson.OrderNo = data[i].officialOrderNo;
					tabjson.OrderArticleTitle = data[i].officialOrderArticleTitle;
					tabjson.OrderAccomplishLink = data[i].officialOrderAccomplishLink;
					tabjson.OrderManuscript = data[i].officialOrderManuscript;
					tabjson.OrderManuscriptDownloadLink = data[i].officialOrderManuscriptDownloadLink;
					tabjson.OrderSourceLink = data[i].officialOrderSourceLink;
					tabjson.OrderPrice = data[i].officialOrderPrice;
					tabjson.OrderExecutionStatusStr = data[i].officialOrderExecutionStatusStr;
					tabjson.createTime = data[i].createTime;
					tabjson.resourceName = data[i].resourceName;
					tabjson.OrderExecutionStatus = data[i].officialOrderExecutionStatus;
					tablist.push(tabjson);
				}
				this.tableData = tablist;
				
			},
			setMicroblogTableData(data){
				console.log('微博');
				let tablist = [];
				for (let i = 0; i <= data.length - 1; i++) {
					// console.log('weibo',i);
					let tabjson = {}
					tabjson.id = data[i].id;
					tabjson.OrderNo = data[i].microblogOrderNo;
					tabjson.OrderArticleTitle = data[i].microblogOrderArticleTitle;
					tabjson.OrderAccomplishLink = data[i].microblogOrderAccomplishLink;
					tabjson.OrderManuscript = data[i].microblogOrderManuscript;
					tabjson.OrderManuscriptDownloadLink = data[i].microblogOrderManuscriptDownloadLink;
					tabjson.OrderSourceLink = data[i].microblogOrderSourceLink;
					tabjson.OrderPrice = data[i].microblogOrderPrice;
					tabjson.OrderExecutionStatusStr = data[i].microblogOrderExecutionStatusStr;
					tabjson.createTime = data[i].createTime;
					tabjson.resourceName = data[i].resourceName;
					tabjson.OrderExecutionStatus = data[i].microblogOrderExecutionStatus;
					tablist.push(tabjson);
				}
				this.tableData = tablist;
				
			},
			setRedbookTableData(data){
				console.log('redbook');
				let tablist = [];
				for (let i = 0; i <= data.length - 1; i++) {
					// console.log('redbokk',i);
					let tabjson = {}
					tabjson.id = data[i].id;
					tabjson.OrderNo = data[i].redbookOrderNo;
					tabjson.OrderArticleTitle = data[i].redbookOrderArticleTitle;
					tabjson.OrderAccomplishLink = data[i].redbookOrderAccomplishLink;
					tabjson.OrderManuscript = data[i].redbookOrderManuscript;
					tabjson.OrderManuscriptDownloadLink = data[i].redbookOrderManuscriptDownloadLink;
					tabjson.OrderSourceLink = data[i].redbookOrderSourceLink;
					tabjson.OrderPrice = data[i].redbookOrderPrice;
					tabjson.OrderExecutionStatusStr = data[i].redbookOrderExecutionStatusStr;
					tabjson.createTime = data[i].createTime;
					tabjson.resourceName = data[i].resourceName;
					tabjson.OrderExecutionStatus = data[i].redbookOrderExecutionStatus;
					tablist.push(tabjson);
				}
				this.tableData = tablist;
				
			},
			setVideoTableData(data){
				let tablist = [];
				console.log('视频');
				for (let i = 0; i <= data.length - 1; i++) {
					let tabjson = {}
					tabjson.id = data[i].id;
					tabjson.OrderNo = data[i].videoOrderNo;
					tabjson.OrderArticleTitle = data[i].videoOrderArticleTitle;
					tabjson.OrderAccomplishLink = data[i].videoOrderAccomplishLink;
					tabjson.OrderManuscript = data[i].videoOrderManuscript;
					tabjson.OrderManuscriptDownloadLink = data[i].videoOrderManuscriptDownloadLink;
					tabjson.OrderSourceLink = data[i].videoOrderSourceLink;
					tabjson.OrderPrice = data[i].videoOrderPrice;
					tabjson.OrderExecutionStatusStr = data[i].videoOrderExecutionStatusStr;
					tabjson.createTime = data[i].createTime;
					tabjson.resourceName = data[i].resourceName;
					tabjson.OrderExecutionStatus = data[i].videoOrderExecutionStatus;
					tablist.push(tabjson);
				}
				this.tableData = tablist;
				
			},

			handleGoto(url) {
				//console.log(url);
				this.$router.push(url);
			},
			handleSizeChange(val) {
				this.ruleForm.size = val;
				this.handleSearch();
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.ruleForm.page = val;
				this.handleSearch();
			},
			submitForm() {},
			exportAll() {},
			search() {
				//console.log(this.ruleForm);
			},
			handleDetail(b, status) {
				// this.$alert("", '订单详情',{dangerouslyUseHTMLString: true});
				this.dialogVisible = true;
				this.active = status + 1;
				//console.log(status);
			},
			handleClose() {
				this.dialogVisible = false;
			},
		}
	}
</script>

<style>
	.header-2 {
		height: 200px;
	}

	.bg-weight {
		background-color: white;
	}

	.form-search {
		display: flex;
		flex-direction: row;
	}


	.el-tabs__nav-wrap::after {

		background-color: #fff !important;
	}

	.el-date-editor.el-input {
		width: 201px !important;
	}

	.tabs {
		padding-left: 15px;
	}

	.search-btn,
	.export-btn {
		width: 77px;
		height: 40px;
		margin-left: 25px;
	}

	.el-tabs__item {
		font-size: 18px !important;
	}

	.el-date-editor--daterange.el-input__inner {
		width: 226px !important;
	}

	.mar-20 {
		margin: 20px;
	}
</style>
